<template>
    <div>
        <div class="in-header">
            <el-container>
                <el-header class="title">{{ title }}</el-header>
                <el-header class="zx-border">
                    <!--<span>专项类型</span>-->
                    <!--<span class="dy">{{ taskTypeName }}</span>-->
                    <span>承办人</span>
                    <span class="dy">{{ userName }}</span>
                    <span>交办领导</span>
                    <span class="dy">{{ leaderName }}</span>
                    <span>开始时间</span>
                    <span class="dy" formatter="dateFormat">{{createTime}}</span>
                    <span>计划完成时间</span>
                    <span class="dy" style="border-right: 0px">{{ planCompleteTime }}</span>
                </el-header>
                <el-container class="footer">
                    <el-aside width="85px" class="xm">说明</el-aside>
                    <el-main>{{ taskExplain }}</el-main>
                </el-container>
            </el-container>
        </div>
        <div class="line"></div>

        <div class="in-offPd">
            <div class="in-officeContent"  v-for="task in taskData">
                <div class="icon-y"></div>
                <div class="item-text">
                    <div class="left">
                        <div class="btn-bl">{{task.appName}}</div>
                        <p>10:24</p>
                        <p>2018-12-05</p>
                    </div>
                    <div class="text-border">
                        <div>
                            <div class="item">{{task.title}}</div>
                            <p class="cbr"><span>承办人：{{task.userName}}</span> <span style="margin-left: 30px">状态：处理中</span></p>
                        </div>
                        <!--<div class="zz">相关工作</div>-->
                    </div>
                </div>
            </div>
        </div>
        <div class="footer-btn">
            <div></div>
            <div class="btn">
                <el-button type="primary" @click="xiazai">导出全部材料</el-button>
                <el-button type="primary" @click="goZai">继续办理</el-button>
            </div>
        </div>
    </div>
</template>

<script>
    import ht from '../../components/common/address'
    import get from '../../components/common/getUrl'
    export default {
        name: "CompletedDetail",
        data(){
            return{
                urlId:'',
                urlToken:'',
                Token:'',
                tkID:'',
                taskType:'',
                title:'',
                taskExplain:'',
                userName: '',
                leaderName:'',
                planCompleteTime:'',
                taskTypeName:'',
                createTime:'',
                taskData: [

                ]
            }
        },
        methods:{
            xiazai(){
                window.open("http://20.0.101.153:8080/threedo/api/downloadFile?appId=ec2b3bab88d9426eaaa1ebb18902987a&fileId=2c91808267cf5f610167cf659ff80003",'_blanks')
                // http://20.0.101.130:6767/Manage/FileDownload.aspx?fid=a69d184f-4445-412c-8556-dea7eaf5524c
                //     window.open("http://20.0.101.130:6767/Manage/FileDownload.aspx?fid=a69d184f-4445-412c-8556-dea7eaf5524c",'_blanks')

            },
            goZai(){
                this.tkID = this.$route.query.id;
                if (this.tkID) {
                    this.tkID=this.urlId;
                }
                console.log('ww',this.tkID);
                this.Token = localStorage.getItem('token');
                this.$http({
                    method:'GET',
                    url:ht.Address + "personal/task/setGoOnById?taskId="+ this.tkID
                    ,headers:{
                        "Authorization":this.Token
                    },
                })
                    .then( (response)=> {
                        console.log('sdfasdfds',response.data.code);
                        console.log('sdfasdfds',this.$route.query.id);
                        if (response.data.code==200){
                            this.$router.push({
                                path:'/detail01',
                                query:{

                                    id:this.$route.query.id
                                }
                            });
                        }
                    }).catch( (error)=> {
                    console.log(error)
                })
            },
            getDetail(){
                this.tkID = this.$route.query.id;
                console.log('ww',this.tkID);
                this.Token = localStorage.getItem('token');
                this.$http({
                    method:'GET',
                    url:ht.Address + "personal/task/getByTaskId?taskId="+ this.tkID +""
                    ,headers:{
                        "Authorization":this.Token
                    },
                })
                    .then( (response)=> {
                        console.log(response.data.data);
                        this.title = response.data.data.taskName;
                        this.taskExplain = response.data.data.taskExplain;
                        this.userName = response.data.data.userName;
                        this.leaderName = response.data.data.leaderName;
                        this.planCompleteTime = response.data.data.endDate;
                        this.taskTypeName = response.data.data.taskTypeName;
                        this.createTime =  response.data.data.beginDate;
                        this.taskType = response.data.data;
                    }).catch( (error)=> {
                    console.log(error)
                })
            },
            getTaskData(){
                this.tkID = this.$route.query.id;
                console.log('ww',this.tkID);
                this.Token = localStorage.getItem('token');
                this.$http({
                    method:'GET',
                    url:ht.Address + "personal/task/findRelationByTaskId?taskid="+ this.tkID
                    ,headers:{
                        "Authorization":this.Token
                    },
                })
                    .then( (response)=> {
                        console.log('sdfasdfds',response.data.data);
                        this.taskData=response.data.data;
                    }).catch( (error)=> {
                    console.log(error)
                })
            }

        },
        created() {
            this.urlId = get.getUrlKey('id');
            this.urlToken =  get.getUrlKey('sessionid');
            console.log('urlId:',this.urlId);
            if (this.urlToken){
                console.log('url传参');
                localStorage.setItem('token',this.urlToken);
                this.getTaskData();
                this.getUrl();
            }else {
                this.getDetail();
                this.getTaskData();
            }

        }
    }
</script>

<style scoped>
    .in-offPd{
        font-size: 18px;
        padding-bottom: 150px;
        padding-top: 20px;
        padding-right: 20px;
    }
    .icon-y{
        position: absolute;
        top: 0px;
        left: 0px;
        width: 15px;
        height: 15px;
        border-radius: 50%;
        border: 2px solid #18B596;
    }
    .item-text{
        position: relative;
        margin-left: 30px;
        display: flex;
    }
    .text-border{
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        margin-top: -10px;
        border: 1px solid #c6c6c6;
        border-radius: 7px;
        padding: 15px 20px 15px 10px;
    }
    .zz{
        cursor: pointer;
        border: 1px solid #6392FC;
        border-radius: 50px;
        color: #6392FC;
        /*padding: 5px 15px;*/
        text-align: center;
        width: 100px;
        height: 30px;
        line-height: 30px;
    }
    .cbr{
        margin-top: 10px;
        color: #2f4050;
    }
    .text-border01{
        /*width: 100%;*/
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 10px;
        border: 1px solid #c6c6c6;
        border-radius: 7px;
        padding: 15px 20px 15px 10px;
    }
    .btn-bl{
        margin-top: 10px;
        font-size: 18px;
        width: 150px;
        padding: 5px 0;
        text-align: center;
        background-color: #6392fc;
        color: #fff;
    }
    .item-text:before{
        content: "";
        position: absolute;
        top: 19px;
        left: -22.5px;
        width: 2px;
        height: 100%;
        background-color: #ADADAD;
    }
    .item-text01{
        position: relative;
        margin-left: 30px;
    }
    .item-text01:before{
        content: "";
        position: absolute;
        top: 19px;
        left: -22.5px;
        width: 2px;
        height: 100%;
        background-color: #ADADAD;
    }
    .item-text01>p{
        color: #2f4050;
    }
    .in-officeContent{
        margin-top: 19px;
        margin-left: 20px;
        /*display: flex;*/
        position: relative;
    }
    .line{
        width: 100%;
        height: 10px;
        background-color: rgba(198, 198, 198,0.5);
    }
    /*#app>.wrapper>.content-box{*/
    /*background: #ffffff!important;*/
    /*}*/
    .in-officeHeader{
        background-color: #ffffff;
        padding: 10px 10px 20px 30px;
    }
    .in-officeContent{
        margin-top: 19px;
        margin-left: 20px;
        /*display: flex;*/
        position: relative;
    }
    .icon-y{
        position: absolute;
        top: 0px;
        left: 0px;
        width: 15px;
        height: 15px;
        border-radius: 50%;
        border: 2px solid green;
    }
    .item-text{
        position: relative;
        margin-left: 30px;
    }
    .text-border{
        margin-top: 10px;
        border: 1px solid #c6c6c6;
        border-radius: 7px;
        padding: 15px 10px;
    }
    .cbr{
        margin-top: 7px;
    }
    .item-text:before{
        content: "";
        position: absolute;
        top: 19px;
        left: -22.5px;
        width: 2px;
        height: 100%;
        background-color: rgba(173,173,173,1);
    }
    .in-officeContent>.item{
        padding: 10px;
        border-radius: 5px;
        border: 1px solid #9b9b9b;
    }
    .state-y{
        background-color: rgba(255,139,16,1);
        color: #ffffff;
        padding: 3px 15px;
        border-radius: 10px;
    }
    .state-r{
        background-color: rgba(237,105,66,1);
        color: #ffffff;
        padding: 3px 15px;
        border-radius: 10px;
    }
    .in-header{
        border: 1px solid #bfbfbf;
        margin: 20px;
    }
    .title{
        border-bottom: 1px solid #bfbfbf;
        height: 54px!important;
        line-height: 54px;
        font-size: 30px;
        color: #2f4050;
        font-weight: normal;
        font-stretch: normal;
    }
    .zx-border{
        color: #808080;
        font-size: 18px;
        height: 40px!important;
        padding: 0;
        display: flex;
    }
    .zx-border>span{
        display: flex;
        align-items: center;
        text-align: center;
        padding: 0 10px;
        height: 100%;
        border-right: 1px solid #bfbfbf;;
        color: #8c8c8c;
    }
    .dy{
        color: #2f4050!important;
    }
    .footer{
        color: #8c8c8c;
        border-top: 1px solid #bfbfbf;
    }
    .xm{
        font-size: 18px;
        text-align: center;
        line-height: 61px;
        width: 93px!important;
        border-right: 1px solid #bfbfbf;
    }
    .btn{
        display: inline;
        margin-left: 600px;
        margin-bottom: 20px;
    }
</style>
